<template>
	<view>
		<view class="changeArea" @tap="chooseLocation">
			<view class="changeArea-left"><i class="iconfont icondingwei"></i>点击定位当前地点</view>
			<i class="iconfont iconright"></i>
		</view>
		<view class="cont">
			<view class="infoItem">
				<view class="infoItem-title">收货人：</view>
				<input type="text" v-model="consignee" placeholder="请填写收货人姓名" placeholder-class="inputDefault" />
			</view>
			<view class="infoItem">
				<view class="infoItem-title">手机号：</view>
				<input type="text" v-model="phone" placeholder="请输入收货人手机号" placeholder-class="inputDefault" />
			</view>
			<view class="infoItem">
				<view class="infoItem-title">所在地区：</view>
				<input type="text" v-model="addarea" placeholder="点击选择所在地区" placeholder-class="inputDefault" disabled="true" @click="handleChange" />
				<mpvue-city-picker themeColor="#E6B873" :pickerValueDefault="pickerValue" ref="mpvueCityPicker" @onConfirm="onConfirm"></mpvue-city-picker>
			</view>
			<view class="infoItem">
				<view class="infoItem-title">详细地址：</view>
				<input type="text" v-model="address" placeholder="如道路、门牌号、小区、楼栋号等" placeholder-class="inputDefault" />
			</view>
		</view>
		<view class="setArea">
			<label>设为默认地址</label>
			<switch :checked="isSet" color="#E6B873" @change="isSet =! isSet" />
		</view>
		<view class="saveBtn" @tap="addAddress">保存收货地址</view>
	</view>
</template>

<script>
	import mpvueCityPicker from '@/components/mpvue-citypicker/mpvueCityPicker.vue';
	import provinceData from '@/components/mpvue-citypicker/city-data/province.js';
	import cityData from '@/components/mpvue-citypicker/city-data/city.js';
	import areaData from '@/components/mpvue-citypicker/city-data/area.js';
	import Checker from '@/common/graceChecker.js';
	export default {
		components: {
			mpvueCityPicker
		},
		data() {
			return {
				consignee: '', //收货人
				phone: '', //手机号
				addarea: '', //所在地区
				address: '', //详细地址
				isSet: false, //是否设为默认地址
				pickerValue: [0,0,0], //默认省市区索引
				areaData: [], //用于存放省市区数据
				unid: '', //地址ID
			}
		},
		onLoad(e) {
			if (e.unid) {
				this.unid = e.unid;
				this.getArea(e.unid);
			}
		},
		methods: {
			// 添加&编辑收货地址
			addAddress() {
				//验证规则
				var rule = [{
					name: 'consignee',
					checkType: 'notnull',
					checkRule: '',
					errorMsg: '请填写收货人姓名'
				}, {
					name: 'phone',
					checkType: 'phoneno',
					checkRule: '',
					errorMsg: '请输入正确的手机号'
				},{
					name: 'addarea',
					checkType: 'notnull',
					checkRule: '',
					errorMsg: '请选择所在地区'
				},{
					name: 'address',
					checkType: 'notnull',
					checkRule: '',
					errorMsg: '请输入详细地址'
				}];
				//验证数据
				var data = {
					consignee: this.consignee,
					phone: this.phone,
					addarea: this.addarea,
					address: this.address
				};
				var getCheck = Checker.check(data, rule);
				if (!getCheck) {
					uni.showToast({
						title: Checker.error,
						icon: 'none'
					});
					return;
				}
				//验证结束
				var data = {
					consignee: this.consignee,
					phone: this.phone,
					province_id: Number(this.areaData[0].value),
					province_name: this.areaData[0].label,
					city_id: Number(this.areaData[1].value),
					city_name: this.areaData[1].label,
					area_id: Number(this.areaData[2].value),
					area_name: this.areaData[2].label,
					address: this.address,
					is_default: this.isSet ? 1 : 0
				}
				if (this.unid) {
					data.unid = this.unid;
				}
				this.$shopApi.apiPost('font/address/save',data).then(res=>{
					this.util.showDialog(res.data.message);
					if (res.data.code == 200) {
						setTimeout(function() {
							uni.navigateBack({
								delta: 1
							})
						}, 500);
					}
				})
			},
			// 获取地址详情
			getArea(unid) {
				this.$shopApi.apiPost('font/address/infos',{page: this.page,unid:unid}).then(res=>{
					if (res.data.code == 200 && res.data.data.list && res.data.data.list.length > 0) {
						var datas = res.data.data.list[0];
						this.consignee = datas.consignee;
						this.phone = datas.phone;
						this.addarea = datas.province_name + datas.city_name + datas.area_name;
						this.address = datas.address;
						this.isSet = datas.is_default == 1 ? true : false;
						this.request(datas.province_name,datas.city_name,datas.area_name,'name');
					}
				})
			},
			// 三级联动选择
			handleChange() {
				this.$refs.mpvueCityPicker.show()
			},
			// 获取所在地区
			onConfirm(e) {
				this.addarea = e.label;
				this.pickerValue = e.value;
				this.request(e.provinec_id,e.cityCode,e.area_id,'id');
			},
			// 选择地址
			chooseLocation: function() {
				var _this = this;
				uni.chooseLocation({
					success: res => {
						var area = res;
						_this.address = area.name;
						var data = {
							key: '225BZ-7QO34-BZOUQ-DU247-YIGX7-IZF3M',
							get_poi: 0
						};
						var url = 'http://apis.map.qq.com/ws/geocoder/v1/?location=' + res.latitude + ',' + res.longitude;
						data.output = 'json';
						uni.request({
							type: 'get',
							dataType: 'jsonp',
							data: data,
							jsonp: 'callback',
							jsonpCallback: 'QQmap',
							url: url,
							success: function(json) {
								var vstr = JSON.parse(json['data']).result.address_component;
								_this.addarea = vstr.province + vstr.city + vstr.district;
								_this.request(vstr.province,vstr.city,vstr.district,'name');
							}
						});
					}
				});
			},
			// 更新用户地址
			request(province,city,area,type) {
				this.areaData = [];
				if (type == 'name') {
					for (var _code in provinceData) {
						if (provinceData[_code].label === province) {
							this.areaData.push(provinceData[_code]);
							//查询 城市
							for (var k in cityData[_code]) {
								if (cityData[_code][k].label === city) {
									this.areaData.push(cityData[_code][k]);
									//查询 区域/县
									for (var j in areaData[_code][k]) {
										if (areaData[_code][k][j].label === area) {
											this.areaData.push(areaData[_code][k][j]);
											this.pickerValue = [parseInt(_code), parseInt(k), parseInt(j)];
										}
									}
								}
							}
						}
					}
				} else {
					for (var _code in provinceData) {
						if (Number(provinceData[_code].value) === Number(province)) {
							this.areaData.push(provinceData[_code]);
							//查询 城市
							for (var k in cityData[_code]) {
								if (Number(cityData[_code][k].value) === Number(city)) {
									this.areaData.push(cityData[_code][k]);
									//查询 区域/县
									for (var j in areaData[_code][k]) {
										if (Number(areaData[_code][k][j].value) === Number(area)) {
											this.areaData.push(areaData[_code][k][j]);
										}
									}
								}
							}
						}
					}
				}
				this.$forceUpdate();
			}
		}
	}
</script>

<style>
	.changeArea,
	.setArea {
		height: 90upx;
		background-color: #FFFFFF;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 30upx;
	}

	.changeArea {
		color: #E6B873;
	}

	.changeArea-left {
		display: flex;
		align-items: center;
	}
	.changeArea-left i {
		margin-right: 10upx;
	}

	.cont {
		margin: 20upx auto;
	}

	.setArea {
		height: 100upx;
	}

	label {
		color: #999999;
		white-space: nowrap;
	}
</style>
